<template>
    <div class="" v-if="cinema">
        <my-head :title="cinema.name"></my-head>
        <div>
            <h2>{{cinema.address}}</h2>
        </div>
        <div>
            <p v-for="(l,i) in films" :key='i' :class="findex==i?'active':'' ">
                <router-link  :to='{name:"film",params:{filmId:l.filmId}}'>
                    {{l.name}}
                </router-link>
            </p>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            cinema:null,
            films:null,   // 当前电影院播放的电影
            schedules:[], // 排片数据 
            findex:0 ,  
        }
    },
    methods:{
        async getCinemaData(){
            let res = await  this.$ajax.getMaizuo({
                cinemaId:this.$route.params.cinemaId
            },{
                'X-Host': 'mall.film-ticket.cinema.info'
            })
            this.cinema = res.data.cinema;
        },
        async getFilms(){
            let res = await  this.$ajax.getMaizuo({
                cinemaId:this.$route.params.cinemaId
            },{
                'X-Host': 'mall.film-ticket.film.cinema-show-film'
            })
            this.films = res.data.films;
            res.data.films.forEach((item,index)=>{
                if(item.filmId == this.$route.params.filmId){
                    this.findex = index;
                }
            })
            this.getschedules(this.findex)
            // this.getschedules(this.$route.params.filmId ? this.$route.params.filmId : this.films[0].filmId);
        },
        async getschedules(filmId){
            let res = await  this.$ajax.getMaizuo({
                cinemaId:this.$route.params.cinemaId,
                filmId,
                date: this.$route.params.date ? this.$route.params.date : Math.floor(new Date().getTime()/1000), 
            },{
                'X-Host': 'mall.film-ticket.schedule.list'
            })
            this.schedules = res.data.schedules;
        },
    },
    mounted(){
        this.getCinemaData()
        this.getFilms()
        
    }
}
</script>


<style lang="scss" scoped>
.active{
    border:1px solid #f50;
    background: #f50;
    padding:5px;
    color:#fff;
}
</style>